<script setup>
import { useTheme } from 'vuetify'
import { hexToRgb } from '@layouts/utils'
import { grossProfitStatistics } from "@/api/system/dashboards";
import { onMounted, ref } from "vue";
import aFlag from "@images/icons/countries/meoli.png";
import bFlag from "@images/icons/countries/shouru.png";
import cFlag from "@images/icons/countries/cehgnben.png";

let series = ref([{data:[]}])
let Xlist = ref([])
let Ylist = ref([
  {
    color: 'primary',
    icon: aFlag,
    title: '毛利',
    amount: '',
    progress: '50',
  },
  {
    color: 'info',
    icon: bFlag,
    title: '收入',
    amount: '',
    progress: '50',
  },
  {
    color: 'error',
    icon: cFlag,
    title: '成本',
    amount: '',
    progress: '50',
  },
])
let totalGrossProfit = ref('')
const getStatistics = async () => {
  const { data } = await grossProfitStatistics('XXX科技')
  Ylist.value[0].amount ='￥' + Number(data.totalGrossProfit).toFixed(2)
  Ylist.value[2].amount  = '￥' + Number(data.totalCost).toFixed(2)
  totalGrossProfit.value = Number(data.maxGrossProfit).toFixed(2)
  Ylist.value[1].amount = '￥' + Number(data.totalRevenue).toFixed(2)
  Xlist.value = data.list.map(item => item.yearAndMonth)
  series.value[0].data = data.list.map(item => item.grossProfit)
}
onMounted(() => {
  getStatistics();
});
const vuetifyTheme = useTheme()

const chartOptions = computed(() => {
  const currentTheme = vuetifyTheme.current.value.colors
  const variableTheme = vuetifyTheme.current.value.variables
  
  return {
    chart: {
      parentHeightOffset: 0,
      type: 'bar',
      toolbar: { show: false },
    },
    plotOptions: {
      bar: {
        barHeight: '60%',
        columnWidth: '30%',
        startingShape: 'rounded',
        endingShape: 'rounded',
        borderRadius: 4,
        distributed: true,
      },
    },
    grid: {
      show: false,
      padding: {
        top: -30,
        bottom: 0,
        left: -10,
        right: -3,
      },
    },
    colors: [
      `rgba(${ hexToRgb(currentTheme.primary) },1)`,
      `rgba(${ hexToRgb(currentTheme.primary) },1)`,
      `rgba(${ hexToRgb(currentTheme.primary) },1)`,
      `rgba(${ hexToRgb(currentTheme.primary) },1)`,
      `rgba(${ hexToRgb(currentTheme.primary) },1)`,
      `rgba(${ hexToRgb(currentTheme.primary) },1)`,
      `rgba(${ hexToRgb(currentTheme.primary) },1)`,
      `rgba(${ hexToRgb(currentTheme.primary) },1)`,
      `rgba(${ hexToRgb(currentTheme.primary) },1)`,
      `rgba(${ hexToRgb(currentTheme.primary) },1)`,
      `rgba(${ hexToRgb(currentTheme.primary) },1)`,
      `rgba(${ hexToRgb(currentTheme.primary) },1)`,
    ],
    dataLabels: { enabled: false },
    legend: { show: false },
    xaxis: {
      categories: [...Xlist.value],
      axisBorder: { show: false },
      axisTicks: { show: false },
      labels: {
        style: {
          colors: `rgba(${ hexToRgb(currentTheme['on-surface']) },${ variableTheme['disabled-opacity'] })`,
          fontSize: '12px',
          fontFamily: 'Public Sans',
        },
      },
    },
    yaxis: { labels: { show: false } },
    tooltip: { enabled: false },
    responsive: [{
      breakpoint: 1025,
      options: { chart: { height: 199 } },
    }],
  }
})

</script>

<template>
  <VCard>
    <VCardItem class="pb-sm-0">
      <VCardTitle style="color: #000; font-size: 20px;font-weight: 900;">
        <div class="ritito">
          <div class="myMaoTitle">
            <p class="Titshu">&nbsp;</p>
            <p>最高月毛利</p>
          </div>
          <div style="font-size: 14px;" >(万元)</div>
        </div>
        
      </VCardTitle>
      <!-- <VCardSubtitle>Weekly Earnings Overview</VCardSubtitle> -->
    </VCardItem>

    <VCardText>
      <VRow>
        <VCol
          cols="12"
          sm="5"
          lg="6"
          class="d-flex flex-column align-self-center"
        >
          <div class="d-flex align-center gap-2 mb-3 flex-wrap">
            <h2 class="text-h2">
              ￥{{ totalGrossProfit }}
            </h2>
          </div>
        </VCol>

        <VCol
          cols="12"
          sm="7"
          lg="6"
        >
          <VueApexCharts
            :options="chartOptions"
            :series="series"
            height="100"
          />
        </VCol>
      </VRow>

      <div class="border rounded mt-5 pa-5">
        <VRow>
          <VCol
            v-for="report in Ylist"
            :key="report.title"
            cols="12"
            sm="4"
          >
            <div class="d-flex align-center">
              <!-- <VAvatar
                rounded
                size="20"
                :color="report.color"
                variant="tonal"
                class="me-2"
              >
                <VIcon
                  size="12"
                  :icon="report.icon"
                />
              </VAvatar> -->
              <img :src="report.icon" alt="" style="block-size: 18px;">

              <h6 class="text-base font-weight-regular" style="font-size: 14px;margin-inline-start: 10px;">
                {{ report.title }}
              </h6>
            </div>
            <h6 class="text-h4 my-2">
              {{ report.amount }}
            </h6>
            <VProgressLinear
              :model-value="report.progress"
              :color="report.color"
              height="4"
              rounded
              rounded-bar
            />
          </VCol>
        </VRow>
      </div>
    </VCardText>
  </VCard>
</template>

<style lang="scss" scoped >
  .cardTit {
    font-weight: 900;
  }

  .ritito {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .myMaoTitle {
    display: flex;
  }

  .Titshu {
    background-color: blue;
    block-size: 100%;
    inline-size: 8px;
    margin-inline-end: 10px;
  }
</style>
